<template lang="html">
  <div id="inventory">
<!--     <h1>这是库存管理</h1> -->
    <el-tabs v-model="activeName" stretch @tab-click="handleClick">
      <el-tab-pane label="消耗品管理" name="first">
        <Expend v-if="destory"></Expend>
      </el-tab-pane>
      <el-tab-pane label="消耗品类型" name="second"><!-- 懒加载 -->
        <ExpendType v-if="!destory"></ExpendType>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Expend from '../../components/back/ygr/Expend.vue'
import ExpendType from '../../components/back/ygr/ExpendType.vue'
import { mapActions } from 'vuex'
import * as url from './../../api/ygrapi.js'
export default {
  name: '',
  components: {
    Expend,
    ExpendType
  },
  data() {
    return {
      activeName: 'first',
      destory: true,
    }
  },
  methods: {
    ...mapActions(['getTable', 'changePage', 'expend/getLists']),
    handleClick(tab) { //切换选项卡触发事件
      console.log(tab.name)
      if (tab.name == 'first') { //存放消耗品管理数据
       this['expend/getLists']([url.getConsumeData]).then(()=>{
        console.log('already get expend datelist')
        this.destory = true;
       })
      } else if (tab.name == 'second') { //存放消耗品管理数据
        this['expend/getLists']([url.getCTData]).then(()=>{
          this.destory = false;
          console.log('expendtye....show')
        })
      }
    },
  },
  computed: {
  },
  created() {
    this['expend/getLists']([url.getConsumeData]).then(()=>{
      console.log(111)
    }) //请求加载表格
  }
}
</script>
<style lang="less" scoped>
#inventory {
  text-align: center;

  h1 {
    color: #909399;
  }
}

</style>


